<template>
  <div class="clipboard-container">
    <div class="copy-area">
      <div class="tips">请输入内容，并点击复制按钮</div>
      <el-input v-model="copyValue" class="copy-input textarea-input-con" type="textarea"></el-input>
      <div class="button-style">
        <el-button class="common-button copy-button" type="primary" @click="handleClip(copyValue, $event)">
          <i class="iconfont com-icon icon-fuzhi"></i>复制
        </el-button>
      </div>
    </div>
    <el-divider></el-divider>
    <div class="paste-area">
      <div class="tips">复制成功后可在这儿粘贴</div>
      <el-input v-model="pasteValue" class="paste-input textarea-input-con" type="textarea"></el-input>
    </div>
  </div>
</template>

<script>
import clip from '@/utils/clipboard'
export default {
  name: 'index',
  data(){
    return{
      copyValue: 'clipboard.js 是一个不需要Flash，就能实现文本复制或者剪切到剪切板的轻量级插件。\n' +
        'clipboard.js 官网: ​ ​http://www.clipboardjs.cn/​​\n' +
        'clipboard.js Github: ​ ​https://github.com/zenorocha/clipboard.js​​\n' +
        '\n' +
        'vue-clipboard2 是一个基于 clipboard.js 封装的，可以轻松地在 vue 项目中使用（包含全局指令）\n' +
        '\n' +
        'vue-clipboard2 npm 地址： ​ ​https://www.npmjs.com/package/vue-clipboard2​\n',
      pasteValue: '',
    }
  },
  methods:{
    handleClip(value, event){
      clip(value, event)
    }
  }
}
</script>

<style lang="scss" scoped>
.clipboard-container{
  background: white;
  height: calc(100vh - 190px);
  box-shadow: 0 0 12px rgba(0, 0,0 , 0.05);
  padding: 20px;
  text-align: left;
}
.tips{
  color: $fontColor;
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 10px;
}
.button-style{
  margin-top: 10px;
}
</style>

<style lang="scss">
.textarea-input-con{
  .el-textarea__inner{
    width: 80%;
    height: 180px;
    font-family: Avenir;
  }
}
</style>
